<template>
	<div class="box-card">

		<div style="display: flex;justify-content: left;flex-direction: row; ">

			<FormAttr :config="form" :params="data.params" :inline="true" :label-width="labelWidth" :size="size" />
		</div>
		<div class="u-flex u-row-between">
			<div>
				<el-button type="plan" icon="Search" @click="ssearch()" :size="size">搜索
				</el-button>
				<el-button type="plan" icon="Refresh" @click="reset()" :size="size">重置
				</el-button>
			</div>
			<div>
				<slot name="action"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	import FormAttr from '/@/components/from/FormAttr.vue'
	import {
		reactive,
		ref,
		watch,
		onMounted
	} from 'vue';
	export default {
		components: {
			FormAttr
		},
		props: {
			form: {
				type: Array,
				default: () => {
					return []
				}
			},
			search: {
				type: Function,
				default: () => {}
			},
			labelWidth: {
				type: Number,
				default: 100
			},
			size: {
				type: String,
				default: 'mini'
			},
			params: {
				type: Object,
				default: () => {
					return {

					}
				}
			}
		},
		setup(props, ctx) {
			const rform = ref(null)
			const data = reactive({
				params: {},
				p: {}
			})
			data.p = JSON.parse(JSON.stringify(props.params))



			watch(() => props.params, (nld, old) => {
				console.log(',dddLLLLLLLLLLL', nld)
				data.params = nld
			}, {
				immediate: true,
				deep: true
			})





			const ssearch = () => {
				ctx.emit("update:params", data.params)
				ctx.emit('search', data.params)
			}
			const reset = () => {
				data.params = {}
				ctx.emit("update:params", {})
				ctx.emit('reset', {})
			}
			return {
				data,
				ssearch,
				rform,
				reset
			}
		}
	}
</script>

<style>
	.card-header {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 10px;
	}

	.box-card {
		width: 100%;
	}
</style>